fix(filterChip): fix for breaking date type filterchip, width wrapping, and text value date#821
Conversation
…g, and text value date
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR migrates calendar/input props to a unified slotProps API across DatePicker and RangePicker, exports DatePicker prop/slot types, changes the default dateFormat to "DD MMM YYYY", and updates tests accordingly. FilterChip gains a typed calendarProps prop, now coerces non-Date values to undefined before passing value to DatePicker, and switches to slotProps for input sizing with content-fit CSS. DataTable/DataView filter definitions propagate calendarProps to FilterChip. Docs, demos, examples, and changelog are updated. Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/raystack/components/filter-chip/filter-chip.tsx (1)
167-168: 💤 Low value
showCalendarIcon={false}is overridable viacalendarProps.It's placed before
{...calendarProps}, so a consumer passingcalendarProps={{ showCalendarIcon: true }}would re-enable the icon — unlikevalue/onSelect, which are locked after the spread. If the chip is meant to always suppress the calendar icon, move it after the spread (or excludeshowCalendarIconfromFilterChipCalendarProps).♻️ Lock the icon suppression
<DatePicker - showCalendarIcon={false} {...calendarProps} + showCalendarIcon={false} value={filterValue instanceof Date ? filterValue : undefined}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/raystack/components/filter-chip/filter-chip.tsx` around lines 167 - 168, The showCalendarIcon prop is being overridden because in FilterChip's JSX the literal showCalendarIcon={false} is placed before the spread of calendarProps; update the FilterChip component so the suppression is locked by either moving showCalendarIcon={false} after {...calendarProps} in the element rendering, or remove/omit showCalendarIcon from the FilterChipCalendarProps type so consumers cannot pass it; locate the render of the calendar (the element receiving {...calendarProps}) in FilterChip (and adjust the calendarProps type/interface if you choose the type-level fix).apps/www/src/content/docs/components/filter-chip/demo.ts (1)
141-155:calendarPropsDemois already consumed by the docs—it's imported and rendered via<Demo data={calendarPropsDemo} />inapps/www/src/content/docs/components/filter-chip/index.mdx, so it’s not dead duplication. If the goal is to avoid duplicated code blocks, compare thecodestring against the inline “Date with calendarProps” tab content.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/www/src/content/docs/components/filter-chip/demo.ts` around lines 141 - 155, The calendarPropsDemo code block is duplicated by the inline “Date with calendarProps” tab in the docs; locate calendarPropsDemo in demo.ts and the inline tab content rendered in index.mdx and remove the duplication by reusing one source: either import and render calendarPropsDemo via <Demo data={calendarPropsDemo} /> inside the “Date with calendarProps” tab or replace calendarPropsDemo.code with the unique content from the tab so only one canonical code snippet exists; update references to the Demo component or the tab content accordingly (symbols: calendarPropsDemo, <Demo>, “Date with calendarProps” tab).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/www/src/content/docs/components/filter-chip/demo.ts`:
- Around line 141-155: The calendarPropsDemo code block is duplicated by the
inline “Date with calendarProps” tab in the docs; locate calendarPropsDemo in
demo.ts and the inline tab content rendered in index.mdx and remove the
duplication by reusing one source: either import and render calendarPropsDemo
via <Demo data={calendarPropsDemo} /> inside the “Date with calendarProps” tab
or replace calendarPropsDemo.code with the unique content from the tab so only
one canonical code snippet exists; update references to the Demo component or
the tab content accordingly (symbols: calendarPropsDemo, <Demo>, “Date with
calendarProps” tab).
In `@packages/raystack/components/filter-chip/filter-chip.tsx`:
- Around line 167-168: The showCalendarIcon prop is being overridden because in
FilterChip's JSX the literal showCalendarIcon={false} is placed before the
spread of calendarProps; update the FilterChip component so the suppression is
locked by either moving showCalendarIcon={false} after {...calendarProps} in the
element rendering, or remove/omit showCalendarIcon from the
FilterChipCalendarProps type so consumers cannot pass it; locate the render of
the calendar (the element receiving {...calendarProps}) in FilterChip (and
adjust the calendarProps type/interface if you choose the type-level fix).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cfabe3ba-193d-4608-a362-c58abd50f44a
📒 Files selected for processing (19)
apps/www/src/content/docs/components/calendar/props.tsapps/www/src/content/docs/components/datatable/props.tsapps/www/src/content/docs/components/filter-chip/demo.tsapps/www/src/content/docs/components/filter-chip/index.mdxapps/www/src/content/docs/components/filter-chip/props.tsdocs/V1-migration.mdpackages/raystack/CHANGELOG.mdpackages/raystack/components/calendar/__tests__/date-picker.test.tsxpackages/raystack/components/calendar/__tests__/range-picker.test.tsxpackages/raystack/components/calendar/date-picker.tsxpackages/raystack/components/calendar/index.tsxpackages/raystack/components/calendar/range-picker.tsxpackages/raystack/components/data-table/components/filters.tsxpackages/raystack/components/data-table/data-table.types.tsxpackages/raystack/components/data-view-beta/components/filters.tsxpackages/raystack/components/data-view-beta/data-view.types.tsxpackages/raystack/components/filter-chip/__tests__/filter-chip.test.tsxpackages/raystack/components/filter-chip/filter-chip.tsxpackages/raystack/components/filter-chip/index.tsx
✅ Files skipped from review due to trivial changes (6)
- packages/raystack/components/calendar/index.tsx
- packages/raystack/components/filter-chip/index.tsx
- apps/www/src/content/docs/components/filter-chip/index.mdx
- packages/raystack/CHANGELOG.md
- apps/www/src/content/docs/components/calendar/props.ts
- docs/V1-migration.md
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/www/src/content/docs/components/filter-chip/props.ts
- packages/raystack/components/filter-chip/tests/filter-chip.test.tsx
Fixes the date-type
FilterChip, makes its value fields hug and truncate to their content,and cleans up the surrounding filter toolbars inDataTable/DataView.After PR #819 made
DatePicker.valuestrictlyDate | undefinedand added a controlled-sync effect keyed onvalueProp?.getTime(), the date filter chip crashed:FilterChipseeds its value state with''and forwarded that string to the picker, so''.getTime()threwTypeError: valueProp?.getTime is not a function(caught by the ErrorBoundary, regenerating the tree).Changes:
toDateValue(): aDatepasses through, a string or epoch number (e.g. filter state hydrated from a URL/query) is parsed via dayjs, and only an unparseable value starts on the "Select date" placeholder instead of throwing.slotProps.inputinputPropsAPI #819 deprecated.calendarPropspropselectPropspattern: forwards arbitraryDatePickerprops (dateFormat,timeZone,slotProps.calendar, …) forcolumnType="date";value/onSelect/defaultValue/childrenstay owned byFilterChip.DataTable/DataViewcolumns gain a parallelfilterProps.calendarslot. The picker-leveldateFormatdefault is now'DD MMM YYYY', so the capture-date filter reads "27 May 2026" instead of "27/05/2026".field-sizing: content,width: autofallback) and is the element that shrinks under toolbar resize pressure — sotext-overflow: ellipsisfires with side padding intact instead of the wrapper clipping both away.min-width: 50pxkeeps an empty value clickable across the whole visible area;max-width: 200pxcaps runaway values. (Input-level approach aligned with draft #826.)DataTable's.filterContainerandDataView's filters row fill the toolbar (flex: 1; min-width: 0; flex-wrap: wrap) so applied chips wrap and shrink instead of overflowing in a single row.selectfilter with nofilterOptionsno longer crashes (options[0]?.value);multiselectfilters preselect the first option likeselectdoes ([]when there are no options) instead of falling through to'';classNames.addFilteris now actually applied to the default add-filter triggers.selectColumnclass reference left behind by #810. Exported the supporting types from the package root:FilterChipProps,FilterChipCalendarProps,FilterChipValue,DatePickerProps,DatePickerSlotProps.V1-migration.md; CHANGELOG entries under 0.49.0 (amended #819 items + a dedicated section for this PR).multiselectis now documented end to end: FilterChip props/demo tabs/playground control,DataTableColumnDef.filterType+ operators in the datatable docs,FiltersProps.classNames, and a working multiselect Team filter in/examples/datatable.Behavior notes:
FilterChips display month-as-text by default — overridable per chip viacalendarProps={{ dateFormat: '…' }}.multiselectfilter starts with the first option preselected, matchingselectbehavior (previously'').Type of Change
How Has This Been Tested?
filter-chip.test.tsx'2026-05-27'→ "27 May 2026"), epoch-number parsing, unparseable-value fallback to unselected, default month-as-text formatting, customdateFormatviacalendarProps, and fluid-container wiring on both the string and date fields.@raystack/apsaraVitest suitetsc --noEmitanywarnings in the originaluseCallbacks; no new warnings)./examples/datatableand dataview example pages.Checklist:
Screenshots (if appropriate):
[Add screenshots here]
Related Issues
[Link any related issues here using #issue-number]